<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纵横小说推荐榜数据可视化平台</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <!-- 顶部区域 -->
    <header class="header">
        <img src="{{ url_for('static', filename='images/logo.png') }}" alt="Logo" class="logo">
        <h1 class="system-title">纵横小说推荐榜数据可视化平台</h1>
    </header>

    <!-- 左侧导航栏 -->
    <nav class="sidebar">
        <a href="/" class="nav-item active">
            <i class="fas fa-book-open fa-fw"></i>
            <span>图书列表</span>
        </a>
        <a href="/charts" class="nav-item">
            <i class="fas fa-chart-pie fa-fw"></i>
            <span>书籍类别分布</span>
        </a>
        <a href="/bar-chart" class="nav-item">
            <i class="fas fa-chart-bar fa-fw"></i>
            <span>类别点击量分析</span>
        </a>
        <a href="/line-chart" class="nav-item">
            <i class="fas fa-chart-line fa-fw"></i>
            <span>字数与推荐数关系</span>
        </a>
        <a href="/boxplot" class="nav-item">
            <i class="fas fa-chart-simple fa-fw"></i>
            <span>状态与周推荐数</span>
        </a>
        <a href="/ranking-chart" class="nav-item">
            <i class="fas fa-trophy fa-fw"></i>
            <span>书籍点击量排名</span>
        </a>
    </nav>

    <!-- 主内容区 -->
    <main class="main-content">
        <h2 class="page-title">图书列表</h2>

        <div class="book-list">
            <!-- 搜索框 -->
            <div class="search-container">
                <form onsubmit="return searchBooks()" class="search-form">
                    <div class="search-input-wrapper">
                        <i class="fas fa-search search-icon"></i>
                        <input
                            type="text"
                            id="searchInput"
                            placeholder="搜索书名、作者或分类"
                            value="{{ search }}"
                            class="search-input"
                        >
                    </div>
                    <button type="submit" class="search-button">
                        <i class="fas fa-search"></i>
                        <span>搜索</span>
                    </button>
                </form>
            </div>

            <!-- 数据统计摘要 -->
            <div class="data-summary">
                <div class="summary-item">
                    <i class="fas fa-book"></i>
                    <div class="summary-content">
                        <div class="summary-value">{{ total_books }}</div>
                        <div class="summary-label">总书籍数</div>
                    </div>
                </div>
                <div class="summary-item">
                    <i class="fas fa-list"></i>
                    <div class="summary-content">
                        <div class="summary-value">{{ total_categories }}</div>
                        <div class="summary-label">类别数</div>
                    </div>
                </div>
                <div class="summary-item">
                    <i class="fas fa-check-circle"></i>
                    <div class="summary-content">
                        <div class="summary-value">{{ completed_books }}</div>
                        <div class="summary-label">已完结</div>
                    </div>
                </div>
                <div class="summary-item">
                    <i class="fas fa-pen"></i>
                    <div class="summary-content">
                        <div class="summary-value">{{ ongoing_books }}</div>
                        <div class="summary-label">连载中</div>
                    </div>
                </div>
            </div>

            <!-- 图书数据表格 -->
            <div class="table-container">
                <div id="loadingIndicator" class="loading" style="display: none;">
                    <div class="loading-spinner"></div>
                </div>

                <table class="book-table">
                    <thead>
                        <tr>
                            <th><i class="fas fa-book fa-fw"></i> 图书名称</th>
                            <th><i class="fas fa-tag fa-fw"></i> 类型</th>
                            <th><i class="fas fa-info-circle fa-fw"></i> 状态</th>
                            <th><i class="fas fa-mouse-pointer fa-fw"></i> 总点击量(万)</th>
                            <th><i class="fas fa-thumbs-up fa-fw"></i> 总推荐(万)</th>
                            <th><i class="fas fa-calendar-week fa-fw"></i> 周推荐</th>
                            <th><i class="fas fa-font fa-fw"></i> 总字数(万)</th>
                            <th><i class="fas fa-bookmark fa-fw"></i> 最新章节</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% if books %}
                            {% for book in books %}
                            <tr>
                                <td>{{ book.book_name }}</td>
                                <td>
                                    <span class="category-tag">{{ book.category }}</span>
                                </td>
                                <td>
                                    <span class="status-badge {% if book.status == '完结' %}status-completed{% else %}status-ongoing{% endif %}">
                                        {{ book.status }}
                                    </span>
                                </td>
                                <td>{{ book.total_clicks }}</td>
                                <td>{{ book.total_recommendations if book.total_recommendations is not none else '0' }}</td>
                                <td>{{ book.weekly_recommendations }}</td>
                                <td>{{ book.total_words }}</td>
                                <td class="latest-chapter">{{ book.latest_chapter }}</td>
                            </tr>
                            {% endfor %}
                        {% else %}
                            <tr>
                                <td colspan="8" class="empty-state">
                                    {% if error %}
                                        <div class="error-message">
                                            <i class="fas fa-exclamation-circle"></i>
                                            {{ error }}
                                        </div>
                                    {% else %}
                                        <div class="empty-state-content">
                                            <i class="fas fa-search"></i>
                                            <p>暂无数据</p>
                                        </div>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endif %}
                    </tbody>
                </table>
            </div>

            <!-- 分页控件 -->
            {% if books %}
            <div class="pagination">
                <button
                    class="pagination-button"
                    {% if current_page == 1 %}disabled{% endif %}
                    data-page="{{ current_page - 1 }}"
                    title="上一页"
                >
                    <i class="fas fa-chevron-left"></i>
                </button>

                {% if total_pages > 7 %}
                    {% if current_page > 4 %}
                        <button class="pagination-button" data-page="1">1</button>
                        {% if current_page > 5 %}
                            <span class="pagination-ellipsis">...</span>
                        {% endif %}
                    {% endif %}

                    {% for page in range(
                        [1, current_page - 2]|max,
                        [total_pages + 1, current_page + 3]|min
                    ) %}
                        {% if page == current_page %}
                            <button class="pagination-button active" disabled>{{ page }}</button>
                        {% else %}
                            <button class="pagination-button" data-page="{{ page }}">{{ page }}</button>
                        {% endif %}
                    {% endfor %}

                    {% if current_page < total_pages - 3 %}
                        {% if current_page < total_pages - 4 %}
                            <span class="pagination-ellipsis">...</span>
                        {% endif %}
                        <button class="pagination-button" data-page="{{ total_pages }}">{{ total_pages }}</button>
                    {% endif %}
                {% else %}
                    {% for page in range(1, total_pages + 1) %}
                        {% if page == current_page %}
                            <button class="pagination-button active" disabled>{{ page }}</button>
                        {% else %}
                            <button class="pagination-button" data-page="{{ page }}">{{ page }}</button>
                        {% endif %}
                    {% endfor %}
                {% endif %}

                <button
                    class="pagination-button"
                    {% if current_page == total_pages %}disabled{% endif %}
                    data-page="{{ current_page + 1 }}"
                    title="下一页"
                >
                    <i class="fas fa-chevron-right"></i>
                </button>
            </div>
            {% endif %}
        </div>
    </main>

    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
    <script>
        // 显示加载状态
        function showLoading() {
            document.getElementById('loadingIndicator').style.display = 'flex';
        }

        // 隐藏加载状态
        function hideLoading() {
            document.getElementById('loadingIndicator').style.display = 'none';
        }

        // 搜索功能
        function searchBooks() {
            showLoading();
            const searchTerm = document.getElementById('searchInput').value.trim();
            window.location.href = `/?search=${encodeURIComponent(searchTerm)}`;
            return false;
        }

        // 分页功能
        document.addEventListener('DOMContentLoaded', function() {
            const paginationButtons = document.querySelectorAll('.pagination-button');
            paginationButtons.forEach(button => {
                if (!button.disabled) {
                    button.addEventListener('click', function() {
                        showLoading();
                        const page = this.getAttribute('data-page');
                        const searchParams = new URLSearchParams(window.location.search);
                        searchParams.set('page', page);
                        window.location.href = `/?${searchParams.toString()}`;
                    });
                }
            });
        });
    </script>
</body>
</html>
